import React from 'react';
import { useNavigate } from 'react-router-dom';
import { SearchIcon, PersonIcon, ArrowDropDownIcon } from '../../../images/index';
import {
    StyledButtonForMenu,
    StyledHeader,
    StyledSpan,
    StyledMenuAndSearchContainer,
    StyledLoginMenu,
} from './Header.styled';
import { ReactComponent as MenuIcon } from '../../../images/menu.svg';
import Textfield from '../../../shared/ui/Textfield/Textfield';
import UserProfileMenu from '../UserProfileMenu/UserProfileMenu';
import authServices from '../../../services/authServices';
import styles from './Header.module.scss';

/**
 * @function Header - Компонент заголовка страницы.
 * @param { React.HTMLAttributes<HTMLDivElement> } nextProps - Свойства компонента.
 * @param { () => void } onMenuToggle - Обработчик события клика по кнопке меню.
 * @returns { React.JSX.Element } - Возвращает JSX элемент заголовка страницы.
 */
const Header = (
    {
        onMenuToggle,
        ...nextProps
    }: React.HTMLAttributes<HTMLDivElement> & { onMenuToggle: () => void }
): React.JSX.Element => {

    /**
     * Состояние, отвечающее за открытие/закрытие меню входа.
     * @type { boolean }
     */
    const [isOpenMenuLogin, setToggleMenuLogin] = React.useState(false);

    const navigate = useNavigate();

    /**
     * Обработчик для открытия/закрытия меню входа.
     * @returns { void }
     */
    const toggleMenuLogin = () => {
        setToggleMenuLogin(!isOpenMenuLogin);
    };

    return (
        <StyledHeader {...nextProps}>
            <StyledSpan>Меню</StyledSpan>
            <StyledMenuAndSearchContainer>
                <StyledButtonForMenu onClick={onMenuToggle}>
                    <MenuIcon />
                </StyledButtonForMenu>
                <Textfield type="search" icon={<SearchIcon />} />
            </StyledMenuAndSearchContainer>
            <StyledLoginMenu onClick={toggleMenuLogin}>
                <div className={styles.personIcon}><PersonIcon /></div>
                <ArrowDropDownIcon />
                {isOpenMenuLogin && (
                    <UserProfileMenu
                        menuItems={[
                            {
                                item: 'Настройки',
                                onClick: () => navigate('/settings')
                            },
                            {
                                item: 'Выход',
                                onClick: async () => {
                                    await authServices.logout().then(() => navigate('/login'));
                                }
                            }
                        ]}
                        menuColor="white"
                    />
                )}
            </StyledLoginMenu>
        </StyledHeader>
    );
};

export default Header;
